<template>
  <div class="user">
    <div class="user-top">
      <i class="user-set" @click="onShow">
        <img src="../assets/user/set.png" />
        <div v-show="isShow" class="information">
          <span @click="logOut">退出登录</span>
        </div>
      </i>
      <div class="user-profile">
        <img src="../assets/user/profile.png" />
      </div>
      <div class="user-name">{{ name }}</div>
    </div>
    <div class="user-order">
      <van-cell title="我的订单" value="全部订单 >" />
      <div class="order-item">
        <div class="item">
          <div class="img">
            <img src="../assets/user/mine_img1.png" />
          </div>
          <div>待付款</div>
        </div>
        <div class="item">
          <div class="img">
            <img src="../assets/user/mine_img2.png" />
          </div>
          <div>待发货</div>
        </div>
        <div class="item">
          <div class="img">
            <img src="../assets/user/mine_img3.png" />
          </div>
          <div>待收货</div>
        </div>
        <div class="item">
          <div class="img">
            <img src="../assets/user/mine_img4.png" />
          </div>
          <div>已完成</div>
        </div>
      </div>
    </div>
    <div class="user-coupons">
      <van-cell title="我的优惠券" value="全部优惠券 >" />
      <div class="coupons-item">
        <div class="item">
          <div class="img">
            <img src="../assets/user/mine_pic1.png" />
          </div>
          <div>待使用</div>
        </div>
        <div class="item">
          <div class="img">
            <img src="../assets/user/mine_pic2.png" />
          </div>
          <div>已使用</div>
        </div>
        <div class="item">
          <div class="img">
            <img src="../assets/user/mine_pic3.png" />
          </div>
          <div>过期关闭</div>
        </div>
      </div>
    </div>
    <div class="user-more">
      <van-cell-group>
        <van-cell title="我的收藏" value=">" />
        <van-cell title="收货地址" value=">" />
        <van-cell title="服务中心" value=">" />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getInfo, getMine, postLogOut } from "../api";
import { useRouter } from "vue-router";

let router = useRouter();
let name = ref("");
let isShow = ref(false);

let icon = reactive({ url: "" });

onMounted(async () => {
  let { data, errmsg } = await getInfo();
  if (errmsg == "请登录" || !localStorage.getItem("userInfo")) {
    showToast("请先登录");
    router.push("/login");
  }
  name.value = data.nickName;
});

const onShow = () => {
  isShow.value = !isShow.value;
};

const logOut = async () => {
  try {
    await postLogOut();
    localStorage.removeItem("userInfo");
    router.push("/");
  } catch (error) {
    console.log(error);
  }
};
</script>
  
<style>
.user {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 100vh;
  position: relative;
  padding-bottom: 50px;
}
.user-top {
  background: url("../assets/user/back.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 130px;
  text-align: center;
  color: #fff;
  padding-top: 30px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.user-set {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
}
.user-set > img {
  width: 24px;
}
.user-profile,
.user-coupons,
.user-order,
.user-more {
  margin-bottom: 10px;
}
.user-profile > img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
.user-name {
  font-size: 14px;
}
.order-item,
.coupons-item {
  background-color: #fff;
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  display: flex;
  width: 100%;
}
.order-item > .item {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.item > .img {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img > img {
  width: 24px;
  height: 24px;
}
.coupons-item > .item {
  width: 33.33%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.information > span {
  text-align: center;
  font-size: 10px;
}
</style>